<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			/* 顶部 */
			.flex{
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.mui-icon{
				font-size: 16px;
			}
			.header{
				display: flex;
				width: 100%;
				background-color: #1c4bf1;
				padding: 10px 0;
			}
			.header .left{
				font-size: 12px;
				color: #fff;
				text-align: center;
			}
			.header .left:nth-child(1){
				width: 100px;
			}
			.header .left:nth-child(3){
				width: 50px;
			}
			.header .left:nth-child(4){
				width: 50px;
			}
			.header .search-box{
				/* background-color: rgba(0, 0, 0, .1); */
			}
			.header .mui-input-clear{
				margin: 0 4px;
			}
			.header—two{
				background-color: #1c4bf1;
			}
			.header—two .header—two-item {
				width: 25%;
				text-align: center;
				color: #fff;
				font-size: 14px;
				background-color: #1c4bf1;
				padding-bottom: 6px;
			}
			.header—two .header—two-item img{
				width: 50px;
				height: 40px;
			}
			.nav-box{
				flex-wrap: wrap;
				background-color: #ffffff;
			}
			.nav-box .nav-box-item{
				width: 20%;
				text-align: center;
				padding: 6px 0;
				font-size: 14px;
			}
			.nav-box .nav-box-item img{
				width: 40px;
				height: 34px;
			}
			.banner{
				width: 100%;
				height: 120px;
				padding: 10px 14px;
				overflow: hidden;
				background-color: #fff;
			}
			.banner img{
				width: 100%;
				height: 100px;
				border-radius: 10px;
				
			}
			.title{
				background-color: #fff;
				padding: 0 14px;
				justify-content: space-between;
				align-items: end;
			}
			.title .left{
				font-size: 16px;
				font-weight: 600;
			}
			.title .right{
				font-size: 12px;
				font-weight: 400;
			}
			.tab-box{
				background-color: #fff;
				width: 100%;
				height: 24px;
				font-size: 14px;
				overflow-x: auto; 
				white-space: nowrap;
				padding: 4px 14px 0;
			}
			.tab-box .tab-box-item{
				width: 30px;
				color: #666;
			}
			.tab-box .tab-box-active{
				color:#000;
				font-size: 14px;
				font-weight: bold;
				position: relative;
			}
			.tab-box .tab-box-active:before{
				position: absolute;
				bottom: -2px;
				left: 30%;
				content: '';
				width: 20px;
				height: 4px;
				border-radius: 3px;
				background-color: #3a52fc;
			}
			/*  */
			.tabs-container {
			  position: relative;
			  width: 100%;
			  overflow: hidden;
			}
			
			.tab-list {
			  display: flex;
			  overflow-x: auto; 
			  white-space: nowrap;
			  padding: 0 14px;
			}
			
			.tab-item {
			  padding: 10px 5px;
			  cursor: pointer;
			  border-bottom: 2px solid transparent;
			}
			
			.tab-item.active {
			  border-bottom-color: #3498db;
			}
			
			.tab-content {
			  padding: 10px;
			}
			
			.tab-content .content {
			  display: none;
			}
			
			.tab-content .content.active {
			  display: block;
			}
				
			.tab-content .content img{
				width: 100%;
			}
			/* 底部 */
			.bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				padding-top: 4px;
				background-color: aliceblue;
				display: flex;
				justify-content: space-around;
			}
		
			.bottom .bottom-item {
				text-align: center;
				font-size: 14px;
			}
			.active {
				color: rgb(72, 122, 250);
			}
			.bottom img {
				width: 20px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="mui-input-row mui-search header">
			<div class="left">
				<span class="mui-icon mui-icon-loop"></span>
				<div class="text">进入老年版	</div>
			</div>
		    <div class="search-box flex">
		    	<input type="search" class="mui-input-clear" placeholder="">
				<span class="mui-icon mui-icon-search"></span>
			</div>
			<div class="left">
				<span class="mui-icon mui-icon-chat"></span>
				<div class="text">消息</div>
			</div>
			<div class="left">
				<span class="mui-icon mui-icon-person"></span>
				<div class="text">客服</div>
			</div>
		</div>
		<div class="header—two flex">
			<div class="header—two-item">
				<img src="./images/header_01.gif" alt="" srcset="" />
				<div class="text">我的保单</div>
			</div>
			<div class="header—two-item">
				<img src="./images/header_02.gif" alt="" srcset="" />
				<div class="text">百万医疗</div>
			</div>
			<div class="header—two-item">
				<img src="./images/header_03.gif" alt="" srcset="" />
				<div class="text">理赔服务</div>
			</div>
			<div class="header—two-item">
				<img src="./images/header_04.gif" alt="" srcset="" />
				<div class="text">免费咨询</div>
			</div>
			<div class="header—two-item">
				<img src="./images/header_05.gif" alt="" srcset="" />
				<div class="text">权益服务</div>
			</div>
		</div>
		
		<div class="nav-box flex">
			<div class="nav-box-item">
				<img src="./images/nav_01.gif" alt="" srcset="" />
				<div class="text">热销爆款</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_02.gif" alt="" srcset="" />
				<div class="text">车险报价</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_03.gif" alt="" srcset="" />
				<div class="text">长期医疗</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_04.gif" alt="" srcset="" />
				<div class="text">重疾保障</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_05.gif" alt="" srcset="" />
				<div class="text">少儿保障</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_06.gif" alt="" srcset="" />
				<div class="text">税优健康</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_07.gif" alt="" srcset="" />
				<div class="text">带病投保</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_08.gif" alt="" srcset="" />
				<div class="text">特惠加油</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_09.gif" alt="" srcset="" />
				<div class="text">家庭投保</div>
			</div>
			<div class="nav-box-item">
				<img src="./images/nav_10.png" alt="" srcset="" />
				<div class="text">更多</div>
			</div>
		</div>
		<div class="banner">
			<img src="./images/微信图片_20241210201207_03.png" alt="" srcset="" />
		</div>
		<div class="title flex">
			<div class="left">
				大家都在买
			</div>
			<div class="right">
				查看全部
				<span class="mui-icon mui-icon-arrowright"></span>
			</div>
		</div>
		<div class="tabs-container">
		  <div class="tab-list" id="tabList"></div>
		</div>
		<div class="tab-content" id="tabContent"></div>
		<div class="bottom">
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">首页</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">保险</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">礼遇</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">我的</div>
			</div>
		</div>
		<script>
			const queryString = window.location.search;
			console.log("queryString", queryString);
			let initIndex = 0;
			const btns = document.querySelectorAll('.bottom-item');
			btns.forEach((btn, index) => {
				if(index == initIndex)
				btn.className += ' active'
			});
			
			// 底部事件
			function fnBottom() {
				const btns = document.querySelectorAll('.bottom-item'); 
				btns.forEach((btn, index) => {
					btn.addEventListener('click', (event) => {
						btns.forEach(item => item.classList.remove('active'));
						event.currentTarget.classList.add('active');
						// console.log(index); 
						if(index== 0){
							window.location.href = `home.html`
						}else if(index ==1){
							window.location.href = `insurance.html`
						}else if(index ==2){
							window.location.href = `gift.html`
						}else if(index ==3){
							window.location.href = `mine.html`
						}
					});
				});
			}
			fnBottom()
			// tab
			document.addEventListener('DOMContentLoaded', function() {
			  const tabData = [
			    { title: '医疗疾病', content: '<img src="./images/微信图片_20241210201207_003_06.gif" alt="" srcset="" />' },
			    { title: '综合意外', content: 'Content of Tab 2' },
				{ title: '财富养老', content: 'Content of Tab 3' },
				{ title: '健康管理', content: 'Content of Tab 4' },
				{ title: '旅游度假', content: 'Content of Tab 5' },
			  ];
			
			  const tabList = document.getElementById('tabList');
			  const tabContent = document.getElementById('tabContent');
			
			  function createTabs(tabs) {
			    tabs.forEach((tab, index) => {
			      const tabItem = document.createElement('div');
			      tabItem.className = 'tab-item';
			      if (index === 0) tabItem.classList.add('active');
			      tabItem.textContent = tab.title;
			      const contentDiv = document.createElement('div');
			      contentDiv.className = 'content';
			      if (index === 0) contentDiv.classList.add('active');
			      contentDiv.innerHTML = tab.content;
			      tabItem.addEventListener('click', () => switchTab(index));
			      tabList.appendChild(tabItem);
			      tabContent.appendChild(contentDiv);
			    });
			  }
			
			  function switchTab(index) {
			    document.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
			    document.querySelectorAll('.content').forEach(content => content.classList.remove('active'));
			    document.querySelectorAll('.tab-item')[index].classList.add('active');
			    document.querySelectorAll('.content')[index].classList.add('active');
			  }
			
			  function handleMoreTabsVisibility() {
			    const scrollWidth = tabList.scrollWidth;
			    const clientWidth = tabList.clientWidth;
			  }
			  createTabs(tabData);
			  handleMoreTabsVisibility();
			  window.addEventListener('resize', handleMoreTabsVisibility);
			 
			});
		</script>
	</body>
</html>